<template>
  <div class="page_demo">
    <div id="container" class='container' :style="node"></div>
  </div>
</template>

<script>
// import AMap from ''
import {getDriverLinesData} from "../../../mock/data";
import {windows} from "codemirror/src/util/browser";

export default {
  that : this,
  data() {
    return {
      node: {
        width: 900 + 'px',
        height: 683 + 'px'
      },
      marker: [],
      speed: 100,
      driverDatas: [],
      timer: '',
      value: 0
    }
  },
  mounted() {
    const that = this
    // 初始化
    that.init()
    // 自适应
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  created() {
  },
  methods: {
    yawl(){
      // console.log("123456")
    },
    startTrack(){
      this.timer = setInterval(this.start(), 3000)
    },
    destoryTrack(){
      clearInterval(this.timer)
    },
    start() {
      this.driverDatas = getDriverLinesData()
      this.drawDriverPath(this.driverDatas)
    },
    drawDriverPath(driverDatas) {
      const that = this;
      var markers = []
      for (let i = 0; i < driverDatas.length; i++) {
        markers[i] = new AMap.Marker({
          map: this.map,
          offset: new AMap.Pixel(0, -12),
          position: driverDatas[i].driverPath[0],
          icon: require('./car.png'),
          autoRotation: true
        })
      }
      for (let i = 0; i < driverDatas.length; i++) {
        markers[i].moveAlong(driverDatas[i].driverPath, driverDatas[i].driverSpeed);
      }
      setTimeout(function () {
        for (let i = 0; i < driverDatas.length; i++) {
           that.map.remove(markers[i])
        }
      }, 9500)
    },
    /**
     * 初始化地图
     */
    init() {
      this.map = new AMap.Map('container', {
        mapStyle: 'amap://styles/fresh',
        zoom: 4,//级别
        center: [105.405349, 30.869372],//中心点坐标
        resizeEnable: true,
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page_demo {
  display: flex;
  /*display: inline-block;*/
  padding: 0;
  margin: 0;
  width: 100%;
}

.container {
  height: 100px;
}
</style>

